<template>
  <div>
     <div class="config">
       <div class="back" onclick="window.history.go(-1)"><img src="../assets/images/back.png" alt=""></div>
        <p>代理加盟</p>
    </div>
     <div class="box">
        <div class="row">
                <img src="../assets/images/dailixiangmu.png" alt="" class="img">
                <p class="title">镜面医美</p>
                <div class="con">
                     <p>授权号:{{uid}}</p>
                     <p>代理级别:{{mylevel}}</p>
                     <p>状态:正常</p>
                </div>               
                  <span @click="modal = true">邀请代理</span>
                             
        </div>
        <Modal v-model="modal" title="选择分享代理的级别" width="300" @on-ok="ok()">
            <Select name="" id="" v-model="level">               
                <Option value="1" v-show="show1">联合创始人</Option>
                <Option value="2" v-show="show2">执行董事</Option>
                <Option value="3" v-show="show3">合伙人</Option>  
                <Option value="4" >钻石代理</Option>                       
            </Select>
        
        </Modal>      
     </div>
  </div>
</template>

<script>
export default {
    name: "inviteAgent",
    data() {
        return {
            modal:false,
            uid:"",
            mylevel:"",
            level:"4",
            show1:true,
            show2:true,
            show3:true,
        };
    },
    methods:{
        ok(){
            localStorage.setItem("level", this.level);
            this.$router.push({name:"share",params:{level:this.level}});            
        }
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].style.background = "#5aa0c8";
    },
    mounted(){
        this.uid=localStorage.getItem("uid");
        if(localStorage.getItem("mylevel")=="1"){
            this.mylevel="联合创始人";
        }else if(localStorage.getItem("mylevel")=="2"){
            this.mylevel="执行董事";
            this.show1=false;
        }else if(localStorage.getItem("mylevel")=="3"){
            this.mylevel="合伙人";
            this.show1=false;
            this.show2=false;
        }else if(localStorage.getItem("mylevel")=="4"){
            this.mylevel="钻石代理";
            this.show1=false;
            this.show2=false;
            this.show3=false;
        }
      
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
    margin-top: 30px;
}

.row {
    height: 120px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    margin: 8px;
    border-radius: 3px;
}

.row .img {
    position: absolute;
    width: 22px;
    top: 13px;
    left: 8px;
}

.row .title {
    position: absolute;
    left: 40px;
    top: 15px;
    font-size: 14px;
}
.row .con {
    position: absolute;
    top: 40px;
    font-size: 12px;
    line-height: 22px;
    color: #666;
    left: 40px;
}
.row span {
    position: absolute;
    right: 20px;
    top: 50px;
    border: 1px solid #8bbcd8;
    padding: 5px 10px;
    border-radius: 2px;
    color: #5aa0c8;
    font-size: 12px;
}
select{
    height: 30px;
    line-height: 30px;
    width: 120px;
    border: 1px solid #8bbcd8;
    background: #fff;
    color: #5aa0c8  
}
</style>
